<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>img</title>
<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lunbo.js"></script>
<style>
body{
	padding: 0px;
	margin: 0px;
}	
img {
	border: 0px;
}
.container {
	width:1000px;
	margin: 0 auto;
	overflow: hidden;
	margin-top: 100px;
}
.img_box {
	overflow: hidden;
	position: relative;
}
.img_list {
	overflow: hidden;
	
}
.img_list img{
	width: 1000px;
	float: left;
}
#btnLeft {
	padding: 30px;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	top: 262px;
	left: 0px;
	color: #ffffff;
	font-weight: bold;
	font-size: 30px;
	cursor: pointer;
}
#btnRight {
	padding: 30px;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	top: 262px;
	right: 0px;
	color: #ffffff;
	font-weight: bold;
	font-size: 30px;
	cursor: pointer;
}
.buttons {
	position: absolute;
	bottom: 0px;
	overflow: hidden;
    left: 50%;
    transform: translate3d(-50%,0,0);
}
.buttons div {
	width: 20px;
	height: 20px;
	background-color: #ffffff;
	float: left;
	margin-right: 10px;
	border: 1px solid #000000;
}
.buttons div.activeDiv {
	border: 1px solid #ffffff;
	background-color: #000000;
}
</style>
</head>
<body>
<div class="container">
	<div class="img_box">
		<div class="img_list">
			<img src="img/1.png"/>
			<img src="img/2.png"/>
			<img src="img/3.png"/>
			<img src="img/4.png"/>
		</div>

		<div id="btnLeft">
			左
		</div>
		<div id="btnRight">
			右
		</div>
		<div class="buttons">
		</div>
	</div>
</div>
<script type="text/javascript">
$(function(){
  var lightbox = new LightBox();
});
</script>
</body>
</html>

